<template>
	<div id="xs-time" class="xs-time">
		<div id=" " class="k"></div>
		<div id=" " class="wrapper ">
			<div id="header" class="header">
					<div class="header-img ">
					</div>
					<div  class="time">
						<label>还剩</label>
						<span>1</span>:
						<span>2</span>:
						<span>3</span>
					</div>
			</div>
			<div id=" " class="center ">
				<a href="">
					<div id="" class="pic">
						<img src="https://pic3.40017.cn/cruises/2015/09/25/15/NP487K.jpg"/>
						<span id="">
							限量80份
						</span>
					</div>
					<div id=" " class="cen-text">
						<h3>【皇家加勒比邮轮-海洋量子号】 2019年07月31日 日本 天津-长崎-天津 4晚5日</h3>
						<div id=" " class="cen-text-pri">
							<p>￥17900.00 <span>起</span></p>
							<span id=" ">
								更多抢购>
							</span>
						</div>
					</div>
				</a>
			</div>
		</div>
		<div class="foot">
				<div id="" class="foot-gg">
					<div id=" ">
						<a href="" class="one">
							<div >
							{{oneHeader.contentOne}}
							</div>
						</a>
						<a href="" class="one-but">
							<div>{{oneHeader.contentTwo}}</div>
						</a>
					</div>
					<a href=""><img class="foot-gg-img" :src="homeWeekend[0].imgUrl"/></a>
				</div>
				<div id="" class="foot-k">
				</div>
				<div id="" class="foot-gg">
					<div id=" ">
						<a href="" class="one">
							<div>
								{{twoHeader.contentOne}}
							</div>
						</a>
						<a href="" class="one-but">
							<div>{{twoHeader.contentTwo}}</div>
						</a>
					</div>
					<a href=""><img class="foot-gg-img" :src="homeWeekend[1].imgUrl"/></a>
				</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			homeWeekend:Array
		}
		,
		computed:{
			oneHeader:function(){
				return this.homeWeekend[0]
			},
			
			twoHeader:function(){
				return this.homeWeekend[1]
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~@/assets/style/mixins.style'
	.k
		height:0.15rem
		margin-bottom:0.2rem 
		margin-top:0.7rem
		background-color:rgba(50,50,50,.033)
	.wrapper
		padding:.2rem .3rem .4rem .3rem
		border-bottom:solid 1px #eee
		.header
			display:flex			
			justify-content:space-between
			align-items:center
			.header-img
				height:0.55rem
				width:2rem
				background:url(//pic5.40017.cn/01/000/5f/b5/rBLkBlqo1SmAXKh2AAATQxd5x9Q718.png)  no-repeat -0.2rem -0.2rem;
				background-size:3rem 2rem;
			.time
				position: relative;
				font-size: 12px;
				vertical-align: bottom;
				font-weight: 600;
				label
					position: relative;
					top:.07rem;
					right:.08rem
				span
					display:inline-block
					height:.4rem;
					width: .5rem;
					background: #999;
					border-radius:10%;
					text-align: center;
					line-height: .4rem;
					color: white;
					font-size: 14px;
		.center
			a
				display: flex;
				justify-content:space-between;
				margin: .15rem 0 0 0;
				letter-spacing:.1em;
				line-height: 1.5em;
				.cen-text
					padding: 0 0 0 .25rem;
					width:100%;
					color:#333333;
					position:relative
					h3
						display:-webkit-box
						overflow:hidden
						-webkit-line-clamp:2
						-webkit-box-orient:vertical
						display:-moz-box
						-moz-line-clamp:2
						-moz-box-orient:vertical;
						display:box
						line-clamp:2
						box-orient:vertical;
						overflow: hidden;
					    text-overflow: ellipsis;
					    display: -moz-box;
					    -moz-line-clamp: 2 !important;
					    -moz-box-orient: vertical;
					    white-space: pre-wrap;
					.cen-text-pri
						display:flex;
						position:relative;
						bottom:-.5rem;
						justify-content:space-between
						p
							color:red;
							font-size:16px;
							span
								font-size:12px;
								color:#777;
						span
							font-size:14px;
							color:#333;
							float:right;
							align-self:flex-end
				.pic
					position:relative
					span
						position:absolute
						top:0;
						left:0;
						color:white;
						font-size: 12px;
						width:1.2rem;
						height: .4rem;
						line-height: .4rem;
						text-align: center;
						background: firebrick;
				img
					width: 2.5rem;
					height: 1.7rem;	
	.foot
		display:flex
		justify-content:space-between
		.foot-k
			width:1px
			background:#eee
		.foot-gg
			padding:.2rem 0 .2rem .3rem
			display:flex
			justify-content:space-between
			>div
				width:1.8rem
				position:relative
				a
					position:relative
					top:.4rem
				.one
					font-size:16px
					>div
						padding:0 .1rem
				.one-but
					font-size:.24rem;
					display:inline-block
					height:.37333rem;
					padding: 0 .26667rem;
					border-radius:.26667rem
					border:solid .5px red
					color:#ebb73f
					line-height:.37333rem;
					margin:.1rem 0 0 0 
			>a
				width:1.5rem
			.foot-gg-img
				border-radius:40%
				width:100%
				float:right;
				padding:0 0 0 0;
</style>